<template>
  <div class="merchat-list">
    <Breadcrumb>
      <BreadcrumbItem v-for="(name, i) in breadcrumb" :key="i">{{
        name
      }}</BreadcrumbItem>
    </Breadcrumb>
    <div class="list-title">查询条件</div>
    <Row type="flex">
      <Form
        ref="formInline"
        :model="formInline"
        inline
        :label-width="0"
        label-position="left"
      >
        <FormItem prop="companyUuid" label="">
          <Select
            v-model="formInline.companyUuid"
            placeholder="公司名称"
            style="minwidth: 162px"
            filterable
            clearable
          >
            <Option
              v-for="item in companyList"
              :value="item.value"
              :key="item.value"
              >{{ item.label }}</Option
            >
          </Select>
        </FormItem>

        <FormItem label="" prop="partnerId">
          <Input
            type="text"
            v-model="formInline.partnerId"
            placeholder="人员id"
            clearable
            style="width: 200px"
          />
        </FormItem>

        <FormItem label="" prop="receiveOpenid">
          <Input
            type="text"
            v-model="formInline.receiveOpenid"
            placeholder="接收人openId"
            clearable
            style="width: 250px"
          />
        </FormItem>

        <FormItem label="" prop="receiveContent">
          <Input
            type="text"
            v-model="formInline.receiveContent"
            placeholder="推送内容"
            clearable
            style="width: 300px"
          />
        </FormItem>
        
        <FormItem prop="date" label="">
          <DatePicker
            ref="datePicker"
            type="daterange"
            @on-change="selectDate"
            placeholder="请选择创建时间"
            style="width: 200px"
          ></DatePicker>
        </FormItem>

        <div class="form-but">
          <Button type="success" @click="getList({pageNum: 1})">查询</Button>
          &nbsp;&nbsp;
          <Button @click="handleReset('formInline')">清空</Button>
        </div>
      </Form>
    </Row>
    <div>
      <Table
        class="list-table"
        stripe
        border
        ref="selection"
        :columns="columns"
        :data="dataList"
      ></Table>
      <div class="table-page">
        <Page
          :total="total"
          show-sizer
          show-elevator
          show-total
          @on-change="changePageNum"
          @on-page-size-change="changePageSize"
        />
      </div>
    </div>
    <Modal width="800" footer-hide v-model="spinShow" title="修改微信失败消息">
      <div class="report-content">
        <div>
          <Form :label-width="140" label-position="left">
            <Row class="base-form">
              <FormItem
                label="接收人openId"
                prop="receiveOpenid"
                :rules="{
                  required: true,
                  message: ' ',
                  trigger: 'blur',
                }"
              >
                <Input
                  type="text"
                  v-model="updateWxMsg.receiveOpenid"
                  placeholder="请输入"
                />
              </FormItem>
              <FormItem
                label="推送内容："
                prop="receiveContent"
                :rules="{
                  required: true,
                  message: ' ',
                  trigger: 'blur',
                }"
              >
                <Input
                  type="textarea"
                  v-model="updateWxMsg.receiveContent"
                  placeholder="请输入"
                  :rows="10"
                />
              </FormItem>
              <Row style="text-align: center">
                <Button type="success" @click="updateSubmit">确认修改</Button>
                <Button @click="cancelEditStatus" style="margin-left: 20px">取消</Button>
              </Row>
            </Row>
          </Form>
        </div>
      </div>
    </Modal>
  </div>
</template>
<script>
import axios from "axios";
import { formatTime } from "@/utils";
import Api from "@/api";

const wxMsgFailureApi = Api.wxMsgFailure;
const companyApi = Api.Company;
export default {
  name: "login",
  components: {},
  data() {
    return {
      breadcrumb: ["系统管理", "微信失败消息记录"],
      formInline: {
        companyUuid: "",
        receiveContent: "",
        partnerId: "",
        receiveOpenid: "",
        createTimeStart: "",
        createTimeEnd: "",
      },
      dataList: [],
      columns: [
        {
          title: "公司名称",
          key: "companyUuid",
          minWidth: 150,
        },
        {
          title: "人员Id",
          key: "partnerId",
          minWidth: 100,
        },
        {
          title: "人员名称",
          key: "partnerName",
          minWidth: 100,
        },
        {
          title: "接收人openId",
          key: "receiveOpenid",
          minWidth: 220,
        },
        {
          title: "推送内容",
          key: "receiveContent",
          minWidth: 350,
        },
        {
          title: "发送状态",
          key: "sendStatus",
          minWidth: 80,
        },
        {
          title: "返回结果",
          key: "result",
          minWidth: 200,
        },
        {
          title: "创建时间",
          key: "createTime",
          minWidth: 150,
          render: (h, params) =>
            h("div", {}, formatTime(params.row.createTime, "second")),
        },
        {
          title: "操作",
          key: "operate",
          minWidth: 100,
          fixed: "right",
          render: (h, params) =>
            h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small",
                  },
                  style: {
                    marginRight: "15px",
                  },
                  on: {
                    click: () => {
                      this.update(params.row);
                    },
                  },
                },
                "编辑"
              ),
            ]),
        },
      ],
      page: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      spinShow: false,
      companyUuid: "",
      companyList: [],
      receiveContent: "",
      // receiveOpenid: "",
      updateWxMsg: [],
    };
  },
  methods: {
    // 分页变化
    changePageNum(pageNum) {
      this.getList({ pageNum });
    },
    // 条数变化
    changePageSize(pageSize) {
      this.getList({ pageSize });
    },
    //清空查询条件
    async handleReset(name) {
      this.$refs.datePicker.handleClear();
      this.formInline.companyUuid = "";
      this.formInline.receiveContent = "";
      this.formInline.createTimeStart = "";
      this.formInline.createTimeEnd = "";
      this.formInline.partnerId = "";
      this.formInline.receiveOpenid = "";
      this.getList();
    },
    async getList(paramsPage = null) {
      let pageNum;
      let pageSize;
      let page;
      const statePage = this.page;
      if (paramsPage) {
        pageNum = paramsPage.pageNum || statePage.pageNum;
        pageSize = paramsPage.pageSize || statePage.pageSize;
        page = { pageNum, pageSize };
        this.page = { pageNum, pageSize };
      } else {
        page = statePage;
      }
      const formInline = this.formInline;
      const value = {};
      Object.keys(formInline).forEach((key) => {
        if (formInline[key]) {
          value[key] = formInline[key];
        }
      });
      const params = {
        page,
        ...value,
      };
      const { responseCode, data } = await this.$request(
        wxMsgFailureApi.listWxMsgFailure,
        params
      );
      this.dataList = [];
      this.total = 0;
      if (responseCode === "1") {
        if (data.list) {
          this.dataList = data.list;
          this.total = data.totalCount;
        }
      }
    },
    selectDate(date) {
      this.formInline.createTimeStart = date[0];
      this.formInline.createTimeEnd = date[1];
    },
    async getCompanyList() {
      const { responseCode, data } = await this.$request(
        companyApi.listOptionCompany
      );
      if (responseCode === "1") {
        const map = {};
        data.forEach((item, index) => {
          map[item.value] = item.label;
        });
        this.companyMap = map;
        this.companyList = data;
      }
    },

    //弹出修改弹窗
    async update(row) {
      this.updateWxMsg = row;
      this.spinShow = true;
    },
    //取消修改
    cancelEditStatus() {
      this.spinShow = false;
      this.getList();
    },
    //确认修改
    updateSubmit() {
      this.$Modal.confirm({
        title: "修改微信失败消息",
        content: "确定修改？",
        onOk: () => {
          this.updateWxMsgFailure(this.updateWxMsg);
        },
      });
    },
    //调用后端接口修改
    async updateWxMsgFailure(params) {
      const { responseCode, responseMessage} = await this.$request(wxMsgFailureApi.updateWxMsgFailure,  params );
      if (responseCode === '1') {
        this.$Message.success('修改成功！')
        this.spinShow = false;
        this.getList();
      } else {
        this.$Message.error('修改失败！')
      }
    },
  },
  mounted() {
    this.getCompanyList();
    this.getList();
  },
};
</script>
<style lang="scss" scoped>
.merchat-list {
  .ivu-form-item {
    margin-right: 20px;
  }
  .form-but {
    display: inline-block;
    margin-bottom: 24px;
  }
  .list-title {
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    color: #333;
  }
  .add {
    margin-bottom: 10px;
  }
  .table-page {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
  }
  .ivu-table .table-success-row td {
    background-color: greenyellow;
    color: #fff;
  }
  .ivu-table .table-fail-row td {
    background-color: red;
    color: #fff;
  }
}
.content-wrapper {
  overflow-x: auto;
}
</style>